<template>
  <div class="app">
    <div class="wrapper">
      <div class="wrapper-left">
        <div class="box">
          <div class="box-left">
            <router-link to="/vip">
            <h4>科二/三VIP</h4>
            <p>资深教练讲技巧</p>
            </router-link>
            
          </div>
          <div class="box-right">
            <img src="../assets/crown.png" alt />
          </div>
        </div>
      </div>
      <div class="wrapper-right">
        <div class="box">
          <div class="box-left">
            <router-link to = "/vip">
            <h4>科一/四SVIP</h4>
            <p>不过包赔</p>
            </router-link>
            
          </div>
          <div class="box-right">
            <img src="../assets/zuanshi.png" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="teach">
      <div class="teach-header">
        <h3>科二考试项目讲解</h3>
      </div>
      <div class="movie">
        <ul>
          <li v-for="item in xiangmu" :key="item.id">
              <div class="movie-box">
                <div class="movie-img">
                    <img :src="require(`../assets/${item.src}`)" alt="">
                </div>
                <p><b>{{item.title}}</b> </p>
              </div>
              </li>
               <!-- <li>
              <div class="movie-box">
                <div class="movie-img">
                    <img src="../assets/1.png" alt="">
                </div>
                <p><b>倒车入库（上）</b> </p>
              </div>
              </li>
              <li>
              <div class="movie-box">
                <div class="movie-img">
                    <img src="../assets/1.png" alt="">
                </div>
                <p><b>倒车入库（上）</b> </p>
              </div>
              </li>
              <li>
              <div class="movie-box">
                <div class="movie-img">
                    <img src="../assets/1.png" alt="">
                </div>
                <p><b>倒车入库（上）</b> </p>
              </div>
              </li>
              <li>
              <div class="movie-box">
                <div class="movie-img">
                    <img src="../assets/1.png" alt="">
                </div>
                <p><b>倒车入库（上）</b> </p>
              </div>
              </li> -->
        </ul>
      </div>
      
    </div>
    <div class="box"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      xiangmu:[
        {src:'daoku.png',title:'倒车入库（上）',id:'01'},
        {src:'daoku.png',title:'倒车入库（下）',id:'02'},
        {src:'banpo.png',title:'坡道定点停车和起步',id:'03'},
        {src:'quxian.png',title:'曲线行驶',id:'04'},
        {src:'zhijiao.png',title:'直角转弯',id:'05'},
        {src:'cefang.png',title:'侧方停车',id:'06'},
      ]
    }
  }
};
</script>
<style lang="scss" scoped>
.app {
  width: 100%;
  .wrapper {
    width: 100%;
    height: 150px;
    display: flex;
    .wrapper-left,
    .wrapper-right {
      flex-grow: 1;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .box {
        width: 95%;
        height: 100px;
        margin: 0 auto;
        border-radius: 10px;
        display: flex;
        align-items: center;
        line-height: 200%;
        .box-left {
          flex-basis: 70%;
          padding-left: 10px;
          h4 {
            font-size: 20px;
            color: #fff;
          }
          p {
            font-size: 16px;
            color: #fff;
          }
        }
        .box-right {
          flex-basis: 30%;
          height: 150px;
          line-height: 150px;
          text-align: center;
          img {
            width: 40px;
            height: 40px;
            vertical-align: middle;
          }
        }
      }
    }
    .wrapper-left {
      .box {
        background-color: #febd2a;
      }
    }
    .wrapper-right {
      .box {
        background-color: #5399f8;
      }
    }
  }
  .teach {
    width: 100%;
    .teach-header {
      width: 100%;
      height: 50px;
      line-height: 50px;
      h3 {
        font-size: 20px;
        padding-left: 15px;
      }
    }
  }
  .movie {
    width: 100%;
    ul {
      width: 100%;
        display: flex;
        flex-wrap: wrap;

      li {
        flex-basis: 50%;
        width: 100%;
        height: 150px;
        .movie-box {
            width: 100%;
            height: 100%;
            margin-top: 10px;
            .movie-img {
                width: 160px;
                height: 100px;
                margin: 0 auto;
                border-radius: 10px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                padding-left: 15px;
                margin-top: 10px;
            }
        }
        
      }
    }
  }
  .box {
    width: 100px;
    height: 80px;
  }
}
</style>